<template>
    <view
        class="fixed bg-white w-full box-border flex-itemsCenter-box pl-20 z-10 text-primary bg-primary"
        :style="{
            'height': `${navHeight}px`,
            'padding-top': `${statusBarHeights}px`
        }"
    >
        <!-- 返回按钮 -->
        <template v-if="!isHome && isNeedBack">
            <text class="iconfont icon-fanhui text-600 text-default mr-12" @click="back"/>
        </template>
        <!-- 其他页面 -->
        <template v-if="custom">
            <slot name="title"/>
        </template>
        <!-- 首页 欢迎语 -->
        <template v-if="isHome">
            <text :class="['iconfont fz-22', tipsInfo.icon]"/>
            <view class="fz-14 text-default ml-8">{{ tipsInfo.name }}</view>
        </template>
    </view>
    <view class="w-full bg-white" :style="{'height': `${navHeight}px`}"/>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

defineProps({
	// 是否自定义 NavBar 内容
	custom: {
		type: Boolean,
		default: false
	},
	// 是否为首页，展示欢迎语句
	isHome: {
		type: Boolean,
		default: false
	},
	// 是否需要返回按钮
	isNeedBack: {
		type: Boolean,
		default: true
	}
})

// 状态栏高度
const statusBarHeights = ref(0)

// 整体顶部导航栏的高度
const navHeight = ref(0)

// 提示信息
const tipsInfo = ref({})

onLoad(() => {
	getStatusHeight()
	tipsInfo.value = getTipsInfo()
})

// 返回上一页
const back = () => {
	uni.navigateBack()
}

// 获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
const getStatusHeight = () => {
	const { statusBarHeight, system } = uni.getSystemInfoSync()
	statusBarHeights.value = statusBarHeight
	navHeight.value = statusBarHeight + (system.indexOf('iOS') > -1 ? 55 : 60)
	uni.setStorageSync('navHeight', navHeight.value)
}

// 首页顶部提示语
const getTipsInfo = () => {
	const newTime = new Date().getHours()
	switch (true) {
	case newTime > 1 && newTime < 5:
		return {
			name: '凌晨了，早点休息哦 ~',
			icon: 'icon-a-qingtianyewan'
		}
	case newTime >= 5 && newTime < 8:
		return {
			name: '早上好，新的一天开始啦 ~',
			icon: 'icon-zaochen'
		}
	case newTime >= 8 && newTime < 11:
		return {
			name: '上午好，活动活动吧!',
			icon: 'icon-shangwu'
		}
	case newTime >= 11 && newTime < 13:
		return {
			name: '中午好，该吃午饭啦！',
			icon: 'icon-qingtian'
		}
	case newTime >= 13 && newTime < 19:
		return {
			name: '下午好，要劳逸结合哦 ~',
			icon: 'icon-xiawucha'
		}
	case newTime >= 19 && newTime < 23:
		return {
			name: '晚上好，放松一下吧!',
			icon: 'icon-fangsong'
		}
	default:
		return {
			name: '夜深了 ~ 好好休息吧',
			icon: 'icon-a-qingtianyewan'
		}
	}
}
</script>
